<template>
  <body>
    <div class="body">
      <v-indexTop1></v-indexTop1>
      <div class="title"><h2>简历编辑：</h2></div>
      <div class="main">
        <div class="main-left">
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <p class="resume_model">基本信息</p>
            <el-form-item label="姓名" prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
              <el-form-item label="性别" prop="gender">
              <el-radio v-model="ruleForm.gender" label="男" border>男性</el-radio>
              <el-radio v-model="ruleForm.gender" label="女" border>女性</el-radio>
            </el-form-item>
            <el-form-item label="出生日期" prop="birthday">
                  <el-col :span="11">
                <el-form-item prop="birthday">
                  <el-date-picker
                    type="date"
                    placeholder="选择日期"
                    v-model="ruleForm.birthday"
                    style="width: 100%"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="ruleForm.email"></el-input>
            </el-form-item>
            <el-form-item label="工作状态" prop="state">
              <el-input v-model="ruleForm.state"></el-input>
            </el-form-item>
            <el-form-item label="国籍" prop="nationality">
              <el-input v-model="ruleForm.nationality"></el-input>
            </el-form-item>
            <p class="resume_model">教育经历</p>
            <el-form-item label="学历" prop="education">
              <el-radio-group v-model="ruleForm.education">
              <el-radio-button label="0">专科</el-radio-button>
              <el-radio-button label="1">本科</el-radio-button>
              <el-radio-button label="2">硕士</el-radio-button>
              <el-radio-button label="3">博士</el-radio-button>
            </el-radio-group>
            </el-form-item>
            <el-form-item label="毕业院校" prop="school_name">
              <el-input v-model="ruleForm.school_name"></el-input>
            </el-form-item>
            <el-form-item label="主修专业" prop="major">
              <el-input v-model="ruleForm.major"></el-input>
            </el-form-item>
            <el-form-item label="毕业时间" prop="Graduation_time">
              <el-col :span="11">
                <el-form-item prop="Graduation_time">
                  <el-date-picker
                    type="date"
                    placeholder="选择日期"
                    v-model="ruleForm.Graduation_time"
                    style="width: 100%"
                    format="yyyy-MM-dd"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
            </el-form-item>
            <p class="resume_model">求职意向</p>
            <el-form-item label="期望职位" prop="position">
              <el-input v-model="ruleForm.position"></el-input>
            </el-form-item>
            <el-form-item label="期望行业" prop="position">
              <el-input v-model="ruleForm.industry"></el-input>
            </el-form-item>
            <el-form-item label="期望薪资" prop="salary">
              <el-input v-model="ruleForm.salary"></el-input>
            </el-form-item>
            <el-form-item label="期望工作地点" prop="location">
              <el-input v-model="ruleForm.location"></el-input>
<!--              <el-col :span="11">-->
<!--                <el-form-item prop="work_time">-->
<!--                  <el-date-picker-->
<!--                    type="date"-->
<!--                    placeholder="选择日期"-->
<!--                    v-model="ruleForm.work_time"-->
<!--                    style="width: 100%"-->
<!--                  ></el-date-picker>-->
<!--                </el-form-item>-->
<!--              </el-col>-->
            </el-form-item>
            <div class="item">
              <p class="resume_model">工作经历</p>
              <el-form-item
                v-for="(domain, index) in ruleForm.works_exp"
                :label="'工作经历' + (index+1)"
                :key="domain.key"
                :prop="'works_exp.' + index + '.value'"
                ><el-button @click.prevent="removeWork_exp(domain)"
                  >删除</el-button
                ><br />
                <el-form-item label="公司名称" prop="desc">
                  <el-input v-model="domain.We_CompanyName"></el-input>
                </el-form-item>
                <el-form-item label="公司行业" prop="desc">
                  <el-input v-model="domain.We_CompanyIndustry"></el-input>
                </el-form-item>
                <el-form-item label="职位名称" prop="desc">
                  <el-input v-model="domain.We_PositionName"></el-input>
                </el-form-item>
                <el-form-item label="公司类别" prop="desc">
                  <el-input v-model="domain.We_PositionType"></el-input>
                </el-form-item>
                <el-form-item label="工作地点" prop="desc">
                  <el-input v-model="domain.We_location"></el-input>
                </el-form-item>
                <el-form-item label="下属人数" prop="desc">
                  <el-input v-model="domain.We_Number"></el-input>
                </el-form-item>
                 <el-form-item label="入职时间" prop="We_ResignTime">
              <el-col :span="11">
                <el-form-item prop="Graduation_time">
                  <el-date-picker
                    type="date"
                    placeholder="选择日期"
                    v-model="domain.We_ResignTime"
                    style="width: 100%"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
            </el-form-item> <el-form-item label="离职时间" prop="Graduation_time">
              <el-col :span="11">
                <el-form-item prop="Graduation_time">
                  <el-date-picker
                    type="date"
                    placeholder="选择日期"
                    v-model="domain.We_EntryTime"
                    style="width: 100%"
                    format="yyyy-MM-dd"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
            </el-form-item>
                <el-form-item label="主要职责" prop="desc1">
                  <el-input
                    type="textarea"
                    v-model="domain.We_ResponsibilityTxt"
                  ></el-input>
                </el-form-item>
              </el-form-item>
              <el-form-item>
                <el-button @click="addWork_exp">新增</el-button>
                <el-button @click="resetForm('ruleForm')"
                  >重置工作经历</el-button
                >
              </el-form-item>
            </div>
            <div class="anniuzu">
              <span><el-button type="primary" @click="submitForm('ruleForm')">保存简历</el-button></span>
              <span><el-button type="primary" @click="Return">取消</el-button></span>
              <el-upload
                name="resumeFile"
                class="upload-demo"
                action="api/upload_file"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :on-success="fileSuccess"
                :before-remove="beforeRemove"
                multiple
                :limit="3"
                :on-exceed="handleExceed"
                :file-list="fileList"
              >
                <el-button size="small" type="primary">点击 简历上传</el-button>
              </el-upload>
            </div>
          </el-form>
        </div>
        <div class="main-right">
          <div>
            <h2>基本信息</h2>
            <p>
              姓名：<span>{{ ruleForm.name }}</span>
            </p>
            <p>
              性别：<span>{{ ruleForm.gender }}</span>
            </p>
            <p>
              出生日期：<span>{{ ruleForm.birthday }}</span>
            </p>

            <p>
              邮箱：<span>{{ ruleForm.email }}</span>
            </p>
            <p>
              工作状态：<span>{{ ruleForm.state }}</span>
            </p>
            <p>
              居住地：<span>{{ ruleForm.address }}</span>
            </p>
            <p>
              国籍：<span>{{ ruleForm.nationality }}</span>
            </p>
          </div>
          <hr>
          <div>
            <h2>教育经历</h2>
            <p>
              学历：<span>{{ ruleForm.education }}&nbsp;（0:专科，1:本科， 2:硕士，3:博士）</span>
            </p>
            <p>
              毕业院校：<span>{{ ruleForm.school_name }}</span>
            </p>
            <p>
              主修专业：<span>{{ ruleForm.major }}</span>
            </p> <p>
              毕业时间：<span>{{ ruleForm.Graduation_time }}</span>
            </p>
          </div>
          <hr>
          <div >
            <h2>求职意向</h2>
            <p>
              期望职位：<span>{{ ruleForm.position }}</span>
            </p>
            <p>
              期望行业：<span>{{ ruleForm.industry }}</span>
            </p>
            <p>
              期望薪资：<span>{{ ruleForm.salary }}</span>
            </p>
            <p>
              期望工作地点：<span>{{ ruleForm.location }}</span>
            </p>
          </div>
          <hr>
          <div class="works">
            <h2 >工作经历</h2>
            <div v-for="(domain, index) in ruleForm.works_exp">
              <h4 style="float: left">工作经历{{index+1}}:</h4><br>
              <p>公司名称：<span>{{domain.We_CompanyName}}</span></p>
              <p>公司行业：<span>{{domain.We_CompanyIndustry}}</span></p>
              <p>职位名称：<span>{{domain.We_PositionName}}</span></p>
              <p>公司类别：<span>{{domain.We_PositionType}}</span></p>
              <p>工作地点：<span>{{domain.We_location}}</span></p>
              <p>下属人数：<span>{{domain.We_Number}}</span></p>
              <p>入职时间：<span>{{domain.We_ResignTime}}</span></p>
              <p>离职时间：<span>{{domain.We_EntryTime}}</span></p>
              <p>主要职责：<span >{{domain.We_ResponsibilityTxt}}</span></p>
              <br> <br>
              <hr>
            </div>
          </div>
          <hr>
        </div>
      </div>
    </div>
  </body>
</template>

<script>
  import indexTop1 from "../assemblyPublic/Index-top1";
    export default {
      name: 'resumeShow',
      data() {
        return {
          fileList: [],//上传文件列表
          images: {
            touxiang1: require("../../assets/img/touxiang1.png"),
            touxiang2: require("../../assets/img/touxiang2.png"),
          },
          // 数据:
          ruleForm: {
            name: "", //姓名
            gender: '',//性别
            age: "", //年龄
            birthday: '',//出生日期
            email: "", //邮箱
            state: '',//状态
            nationality: '',//国籍
            address: "", //居住地
            education: "", //学历
            school_name: "", //毕业院校
            major: "", //主修专业
            position: "", //意向岗位
            salary: "", //期望薪资
            location: '',//期望工作地点
            industry: '',//期望行业
            Graduation_time: '',//毕业时间
            pro_time: "",
            works_exp: [
              //工作经历
              {
                We_CompanyName: "", //公司名称
                We_CompanyIndustry: "", //公司行业
                We_ResponsibilityTxt: "", //主要职责
                We_Number: '',//下属人数
                We_ResignTime: '',//入职时间
                We_location: '',//工作地点
                We_EntryTime: '',//离职时间
                We_PositionType: '',//公司类别
                We_PositionName: '',//职位名称
              },
            ],
          },
          // 验证：
          rules: {
            name: [
              {required: true, message: "请输入", trigger: "blur"},
              // { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
            ],
            region: [
              {required: true, message: "请选择活动区域", trigger: "change"},
            ],
            desc0: [{required: true, message: "请填写具体工作内容", trigger: "blur"}],
          },
        };
      },
      mounted: function () {
        // alert('!!!');
        this.load_data()
      },
      methods: {
        Return() {
           this.$router.push({
                    path: "/resumeDisplay",
                  });
        },
        load_data() {
          this.$axios({
            method: 'POST',
            url: 'api/res_display',
            data: {
              phone_num: this.$session.get('userPhone')
            },
          }).then((data) => {
            if (data.data.res_case == 'ok') {
              console.log(data.data);
              this.ruleForm.name = data.data.user[0].user_name;
              if (data.data.resume_list[0].resume_age) {
                this.ruleForm.gender = '女'
              } else {
                this.ruleForm.gender = '男'
              }
              this.ruleForm.birthday = data.data.resume_list[0].resume_birthday;
              this.ruleForm.email = data.data.user[0].user_mail;
              this.ruleForm.state = data.data.resume_list[0].resume_state;
              this.ruleForm.address = data.data.resume_list[0].resume_census;
              this.ruleForm.nationality = data.data.resume_list[0].resume_nationality;
              this.ruleForm.education = data.data.resume_list[0].resume_SchoolLevel;
              this.ruleForm.school_name = data.data.resume_list[0].resume_School;
              this.ruleForm.major = data.data.resume_list[0].resume_professional;
              this.ruleForm.Graduation_time = data.data.resume_list[0].resume_GraduationTime;
              this.ruleForm.position = data.data.resume_list[0].resume_hope_position;
              this.ruleForm.salary = data.data.resume_list[0].resume_hope_annuity;
              this.ruleForm.location = data.data.resume_list[0].resume_hope_location;
              this.ruleForm.industry = data.data.resume_list[0].resume_hope_industry;
              this.ruleForm.works_exp = data.data.works;
              console.log(this.ruleForm.works_exp)
            } else {
              alert('加载有误！')
            }
          })
        },
        submitForm(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              console.log('submit!!');
              this.$axios({
                method: 'POST',
                url: 'api/res_save',
                data: {
                  ruleForm: this.ruleForm,
                }
              }).then((result) => {
                if (result.data.save_case == 'ok') {
                  console.log('修改完成')
                  this.$router.push({
                    path: "/resumeDisplay",
                  });
                } else {
                  alert('数据有误，请修改')
                }
              })
            } else {
              console.log("error submit!!");
              return false;
            }
          });
        },
        resetForm(formName) {
          this.$refs[formName].resetFields();
        },
        //移除工作经历
        removeWork_exp(item) {
          var index = this.ruleForm.works_exp.indexOf(item);
          if (index !== -1) {
            this.ruleForm.works_exp.splice(index, 1);
          }
        },
        //添加工作经历
        addWork_exp() {
          this.ruleForm.works_exp.push({
            work_componyname: "", //公司名称
            work_position: "", //工作岗位
            work_duty: "", //主要职责
            key: Date.now(),
          });
        },
        // 简历上传
        handleRemove(file, fileList) {
          // console.log(file, fileList);
        },
        handlePreview(file) {
          // console.log(file);
        },
        handleExceed(files, fileList) {
          this.$message.warning(
            `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
              files.length + fileList.length
            } 个文件`
          );
        },
        beforeRemove(file, fileList) {
          return this.$confirm(`确定移除 ${file.name}？`);
        },
        fileSuccess() {
          console.log(this.fileList);
        },


      },
      components: {
        "v-indexTop1": indexTop1,
      },
    };
</script>

<style scoped>
.body {
  width: 100%;
  height: 100%;

  background-color: #f0f0f0;
}
.wrap {
  border: none;
  width: 1200px;
  margin: 0 auto;
  font-size: 12px;
  list-style: none;
  padding-top: 15px;
  color: white;
}
.item .el-form-item {
  margin-top: 5px;
}
.logo {
  float: left;
  height: 40px;
  width: 110px;
  color: white;
  /* background: url(../images/logo.png) no-repeat; */
  background-size: contain;
  padding-top: 5px;
}
.is-student {
  font-size: 16px;
  float: left;
}
.resume_model {
  font-size: 23px;
  text-align: left;
  font-weight: bold;
  margin-top: 10px;
  margin-bottom: 15px;
}
.link-menu-list {
  width: 180px;
  margin-left: 80%;
  padding-top: 12px;
}
.minixFace {
  float: right;
  font-size: 18px;
}
.i-top {
  width: 100%;
  height: 80px;
  background: #303a40;
  top: 0px;
}
.title {
  width: 100%;
  height: 10%;
  background: rgb(226, 226, 226);
  padding-top: 10px;
  padding-bottom: 10px;
}
.title h2 {
  margin-left: -74%;
}
.main {
  width: 80%;
  margin: 0 auto;
  margin-bottom: 50px;
  margin-top: 2%;
}
.main-left {
  width: 44%;
  float: left;
  height: 100px;
  /* border: 1px solid black; */
  padding-top: 15px;
}
.main-right {
  border: 2px solid #f0f0f0;
  width: 40%;
  float: right;


  padding-top: 15px;
}
.main-right > div {
  margin-bottom: 30px;
}
.main-right p {
  text-align: left;
  margin-top: 30px;
  padding-left: 80px;
}
.anniuzu {
  height: 100px;
}
.anniuzu>div{
  width: 200px;
  float: right;
  height: 100px;
}
.anniuzu .el-button--small{
  padding: 14px 15px;
}
  .works hr{
    border-style: dotted;
    border-top-color: #e8e8e8;
    margin: 20px 0;
  }

</style>
